// pages/main/exhibitionLocation/exhibitionLocation.js
const mapDataUtil = require('../../../utils/mapData.js');
const app = getApp();
var util = require('../../../utils/util.js');

Page({
  /**
   * 页面的初始数据
   */
  data: {
    apiUrl: '',
    booths: [],
    customAreas: [],
    // 修改为按展馆存储自定义区域
    customAreasByMap: {},
    currentMap: '',
    mapOptions: [],
    mapIndex: 0,
    scale: 1,
    selectedBoothIndex: -1,
    selectedAreaIndex: -1,
    scrollLeft: 0,
    scrollTop: 0,
    searchKeyword: '' // 添加搜索关键词
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this, map = this.data.mapOptions, index = this.data.mapIndex;
    util.ajax({
      url: util.apiUrl + '/wechat_api/exhibition/exhibition_hall_list',
      method: 'GET',
      success: (res) => {
        if (res.code === 0) {
          for (let i=0;i<res.data.length;i++) {
            map.push(res.data[i].name);
          }
          index = map.indexOf(options.exh);
          that.setData({
            mapOptions: map,
            mapIndex: index
          })
        } else {
          wx.showToast({ title: res.message || '列表获取失败', icon: 'none' });
        }
      },
      fail: () => {
        wx.showToast({ title: '网络错误，请重试', icon: 'none' });
      }
    });

    setTimeout(function(e) {
      console.log(index);
      util.ajax({
        url: util.apiUrl + '/wechat_api/exhibition/booth/list/'+ (index+1),
        method: 'GET',
        success: (res) => {
          if (res.code === 0) {
            console.log(res)
            that.setData({
              booths: res.data
            })
          } else {
            wx.showToast({ title: res.message || '列表获取失败', icon: 'none' });
          }
        },
        fail: () => {
          wx.showToast({ title: '网络错误，请重试', icon: 'none' });
        }
      });
    },500)
    

    this.setData({
      apiUrl: util.apiUrl,
      currentMap: options.exh,
    })

    // 添加示例自定义区域数据，与特定展馆绑定
    this.addCustomAreaForMap("N1", "休息区", [
      {x: 350, y: 300},
      {x: 610, y: 300},
      {x: 610, y: 450},
      {x: 350, y: 450}
    ]);
    
    // 初始化当前展馆的自定义区域
    setTimeout(() => {
      this.loadCustomAreasForMap(options.exh);
    }, 300);
  },

  /**
   * 为指定展馆添加自定义区域
   * @param {string} mapName 展馆名称
   * @param {string} name 区域名称
   * @param {Array} points 至少4个坐标点 [{x: 0, y: 0}, {x: 100, y: 0}, ...]
   */
  addCustomAreaForMap(mapName, name, points) {
    if (!mapName || !name || !points || points.length < 4) {
      console.error('展馆名称、区域名称和坐标点不能为空，且至少需要4个坐标点');
      return;
    }

    // 计算区域的边界
    let minX = points[0].x, maxX = points[0].x;
    let minY = points[0].y, maxY = points[0].y;
    
    for (let i = 1; i < points.length; i++) {
      minX = Math.min(minX, points[i].x);
      maxX = Math.max(maxX, points[i].x);
      minY = Math.min(minY, points[i].y);
      maxY = Math.max(maxY, points[i].y);
    }

    const newArea = {
      id: 'custom-area-' + Date.now() + '-' + Math.random(),
      name: name,
      points: points,
      bounds: {
        minX: minX,
        maxX: maxX,
        minY: minY,
        maxY: maxY,
        width: maxX - minX,
        height: maxY - minY
      },
      mapName: mapName // 添加展馆名称属性
    };

    // 获取当前存储的按展馆分类的自定义区域
    const customAreasByMap = this.data.customAreasByMap;
    
    // 如果该展馆还没有自定义区域，则初始化数组
    if (!customAreasByMap[mapName]) {
      customAreasByMap[mapName] = [];
    }
    
    // 添加新区域到对应展馆
    customAreasByMap[mapName].push(newArea);

    // 如果当前展馆就是目标展馆，则更新customAreas数据
    if (this.data.currentMap === mapName) {
      this.setData({
        customAreas: customAreasByMap[mapName],
        customAreasByMap: customAreasByMap
      });
      
      // 绘制区域，增加延迟确保视图已更新
      setTimeout(() => {
        this.drawCustomArea(customAreasByMap[mapName].length - 1);
      }, 200);
    } else {
      // 仅更新数据
      this.setData({
        customAreasByMap: customAreasByMap
      });
    }
  },

  /**
   * 切换展馆时加载对应的自定义区域
   * @param {string} mapName 展馆名称
   */
  loadCustomAreasForMap(mapName) {
    const customAreasByMap = this.data.customAreasByMap;
    const areas = customAreasByMap[mapName] || [];
    
    this.setData({
      customAreas: areas,
      currentMap: mapName
    }, () => {
      // 页面数据更新后重新绘制自定义区域
      setTimeout(() => {
        for (let i = 0; i < this.data.customAreas.length; i++) {
          this.drawCustomArea(i);
        }
      }, 200);
    });
  },

  /**
   * 添加自定义区域（保持兼容性）
   * @param {string} name 区域名称
   * @param {Array} points 至少4个坐标点 [{x: 0, y: 0}, {x: 100, y: 0}, ...]
   */
  addCustomArea(name, points) {
    // 默认添加到当前展馆
    this.addCustomAreaForMap(this.data.currentMap, name, points);
  },

  /**
   * 绘制自定义区域
   * @param {number} areaIndex 区域索引
   */
  drawCustomArea(areaIndex) {
    const area = this.data.customAreas[areaIndex];
    const canvasId = area.id + '-canvas';
    const scale = this.data.scale;
    
    // 延迟一小段时间确保canvas元素已渲染
    setTimeout(() => {
      const ctx = wx.createCanvasContext(canvasId, this);
      
      // 设置虚线样式
      ctx.setLineDash([5, 5], 5);
      ctx.setLineWidth(2);
      ctx.setStrokeStyle('#a9a9a9');
      ctx.setFillStyle('rgba(255, 255, 255, 0.1)');
      
      // 绘制路径
      ctx.beginPath();
      const points = area.points;
      if (points.length >= 4) {
        // 移动到第一个点（需要减去区域的最小坐标以适应canvas坐标系）
        ctx.moveTo((points[0].x - area.bounds.minX) * scale, (points[0].y - area.bounds.minY) * scale);
        
        // 连接到其他点
        for (let i = 1; i < points.length; i++) {
          ctx.lineTo((points[i].x - area.bounds.minX) * scale, (points[i].y - area.bounds.minY) * scale);
        }
        
        // 闭合路径
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        
        // 在区域左上角添加文字（而不是中心）
        const textX = 5 * scale;  // 左边距
        const textY = 5 * scale; // 上边距
        ctx.setFontSize(12 * scale);
        ctx.setFillStyle('#a9a9a9');
        ctx.setTextAlign('left');
        ctx.setTextBaseline('top');
        ctx.fillText(area.name, textX, textY);
        
        ctx.draw(false, () => {
          console.log('Canvas绘制完成:', area.name);
        });
      }
    }, 100);
  },

  /**
   * 绘制自定义区域（备用方法）
   * @param {Object} area - 区域数据
   * @param {string} canvasId - Canvas ID
   * @param {Number} scale - 缩放比例
   */
  drawCustomAreaFallback(area, canvasId, scale) {
    try {
      // 使用已废弃但稳定的方法
      const ctx = wx.createCanvasContext(canvasId, this);
      
      // 设置虚线样式
      ctx.setLineDash([5, 5], 5);
      ctx.setLineWidth(2);
      ctx.setStrokeStyle('#a9a9a9');
      ctx.setFillStyle('rgba(255, 255, 255, 0.1)');
      
      // 绘制路径
      ctx.beginPath();
      const points = area.points;
      if (points.length >= 4) {
        // 移动到第一个点（需要减去区域的最小坐标以适应canvas坐标系）
        ctx.moveTo((points[0].x - area.bounds.minX) * scale, (points[0].y - area.bounds.minY) * scale);
        
        // 连接到其他点
        for (let i = 1; i < points.length; i++) {
          ctx.lineTo((points[i].x - area.bounds.minX) * scale, (points[i].y - area.bounds.minY) * scale);
        }
        
        // 闭合路径
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        
        // 在区域左上角添加文字（而不是中心）
        const textX = 5 * scale;  // 左边距
        const textY = 5 * scale; // 上边距
        ctx.setFontSize(12 * scale);
        ctx.setFillStyle('#a9a9a9');
        ctx.setTextAlign('left');
        ctx.setTextBaseline('top');
        ctx.fillText(area.name, textX, textY);
        
        // 必须调用draw方法才能真正绘制
        ctx.draw(false, () => {
          console.log('Canvas备用方法绘制完成:', area.name);
        });
      }
    } catch (error) {
      console.error('绘制失败:', error);
    }
  },

  /**
   * 获取区域宽度
   */
  getAreaWidth(area) {
    if (!area.bounds) return 0;
    return area.bounds.width;
  },

  /**
   * 获取区域高度
   */
  getAreaHeight(area) {
    if (!area.bounds) return 0;
    return area.bounds.height;
  },

  /**
   * 自定义区域点击事件
   */
  onCustomAreaTap(e) {
    const areaId = e.currentTarget.dataset.areaId;
    const customAreas = this.data.customAreas;
    
    let selectedAreaIndex = -1;
    for (let i = 0; i < customAreas.length; i++) {
      if (customAreas[i].id === areaId) {
        selectedAreaIndex = i;
        break;
      }
    }
    
    this.setData({
      selectedAreaIndex: selectedAreaIndex,
      selectedBoothIndex: -1
    });
    
    // 延迟执行居中操作，确保页面数据更新完成
    setTimeout(() => {
      this.centerCustomArea(selectedAreaIndex);
    }, 100);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 页面渲染完成后绘制所有自定义区域
    // 增加延迟和重试机制，确保Canvas元素已完全渲染
    const drawAllAreas = () => {
      if (this.data.customAreas.length > 0) {
        for (let i = 0; i < this.data.customAreas.length; i++) {
          this.drawCustomArea(i);
        }
      }
    };
    
    // 初始延迟绘制
    setTimeout(drawAllAreas, 500);
    
    // 额外重试确保绘制成功
    setTimeout(drawAllAreas, 1000);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },

  /**
   * 处理触摸开始事件
   */
  handleTouchStart(e) {
    if (e.touches.length === 2) {
      // 记录初始双指距离
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      const distance = Math.sqrt(
        Math.pow(touch2.clientX - touch1.clientX, 2) +
        Math.pow(touch2.clientY - touch1.clientY, 2)
      );
      this.initialDistance = distance;
    }
  },

  /**
   * 处理触摸移动事件
   */
  handleTouchMove(e) {
    if (e.touches.length === 2) {
      // 计算当前双指距离
      const touch1 = e.touches[0];
      const touch2 = e.touches[1];
      const distance = Math.sqrt(
        Math.pow(touch2.clientX - touch1.clientX, 2) +
        Math.pow(touch2.clientY - touch1.clientY, 2)
      );

      // 如果有初始距离，则计算缩放比例
      if (this.initialDistance && !this.isScaling) {
        this.isScaling = true;
        
        // 使用requestAnimationFrame优化性能
        wx.nextTick(() => {
          const scaleChange = (distance - this.initialDistance) / 150; // 调整灵敏度
          const newScale = Math.min(Math.max(this.data.scale + scaleChange, 0.5), 3);
          
          // 添加过渡效果
          this.setData({
            scale: newScale
          }, () => {
            // 缩放完成后重置状态
            setTimeout(() => {
              this.isScaling = false;
            }, 16);
            
            // 重新绘制所有自定义区域，增加延迟确保缩放已完成
            setTimeout(() => {
              for (let i = 0; i < this.data.customAreas.length; i++) {
                this.drawCustomArea(i);
              }
            }, 50);
          });

          // 更新初始距离，以便持续缩放
          this.initialDistance = distance;
        });
      }
    }
  },

  /**
   * 处理触摸结束事件
   */
  handleTouchEnd(e) {
    this.initialDistance = null;
    
    // 延迟重新绘制所有自定义区域，确保缩放已完成
    setTimeout(() => {
      const drawAreas = () => {
        if (this.data.customAreas && this.data.customAreas.length > 0) {
          let successCount = 0;
          const total = this.data.customAreas.length;
          
          for (let i = 0; i < this.data.customAreas.length; i++) {
            try {
              this.drawCustomArea(i);
              successCount++;
            } catch (error) {
              console.error(`绘制区域 ${i} 失败:`, error);
            }
          }
          
          console.log(`Canvas绘制完成: ${successCount}/${total} 个区域`);
        }
      };
      
      // 初始绘制
      drawAreas();
      
      // 额外重试一次，确保Canvas元素已完全渲染
      setTimeout(drawAreas, 100);
    }, 50);
  },

  /**
   * 加载地图数据
   */
  // loadMapData(mapName) {
  //   try {
  //     const booths = mapDataUtil.getMapData(mapName);
  //     this.setData({
  //       booths: booths,
  //       currentMap: mapName
  //     });
  //   } catch (error) {
  //     console.error('Failed to load map data:', error);
  //     wx.showToast({
  //       title: '数据加载失败',
  //       icon: 'none'
  //     });
  //   }
  // },

  /**
   * 地图选择更改事件
   */
  onMapChange(e) {
    const selectedIndex = e.detail.value;
    const selectedMap = this.data.mapOptions[selectedIndex];
    let that = this;
    that.setData({
      booths: []
    })
    util.ajax({
      url: util.apiUrl + '/wechat_api/exhibition/booth/list/'+ (parseInt(selectedIndex)+1),
      method: 'GET',
      success: (res) => {
        if (res.code === 0) {
          console.log(res)
          that.setData({
            booths: res.data
          })
        } else {
          wx.showToast({ title: res.message || '列表获取失败', icon: 'none' });
        }
      },
      fail: () => {
        wx.showToast({ title: '网络错误，请重试', icon: 'none' });
      }
    });
    this.setData({
      mapIndex: selectedIndex,
      scale: 1,
      selectedBoothIndex: -1,
      selectedAreaIndex: -1,
      searchKeyword: '' // 清空搜索关键词
    }, () => {
      // 加载新展馆的自定义区域
      this.loadCustomAreasForMap(selectedMap);
    });
  },

  // 放大功能
  zoomIn() {
    if (this.isScaling) return; // 防止在双指缩放时触发
    this.isScaling = true;
    
    const newScale = Math.min(this.data.scale + 0.15, 3);
    this.setData({
      scale: newScale
    }, () => {
      setTimeout(() => {
        this.isScaling = false;
      }, 100);
      
      // 重新绘制所有自定义区域，增加延迟确保缩放已完成
      setTimeout(() => {
        for (let i = 0; i < this.data.customAreas.length; i++) {
          this.drawCustomArea(i);
        }
      }, 50);
    });
  },

  // 缩小功能
  zoomOut() {
    if (this.isScaling) return; // 防止在双指缩放时触发
    this.isScaling = true;
    
    const newScale = Math.max(this.data.scale - 0.15, 0.5);
    this.setData({
      scale: newScale
    }, () => {
      setTimeout(() => {
        this.isScaling = false;
      }, 100);
      
      // 重新绘制所有自定义区域，增加延迟确保缩放已完成
      setTimeout(() => {
        for (let i = 0; i < this.data.customAreas.length; i++) {
          this.drawCustomArea(i);
        }
      }, 50);
    });
  },

  // 展位点击事件
  onBoothTap(e) {
    const boothIndex = e.currentTarget.dataset.index, id = e.currentTarget.id;
    this.setData({
      selectedBoothIndex: boothIndex,
      selectedAreaIndex: -1
    });
    
    // 延迟执行居中操作，确保页面数据更新完成
    setTimeout(() => {
      this.centerBooth(id);
    }, 100);
  },

  // 将展位居中显示
  centerBooth(boothIndex) {
    // 添加防抖，避免频繁触发
    if (this.centerBoothTimer) {
      clearTimeout(this.centerBoothTimer);
    }

    this.centerBoothTimer = setTimeout(() => {
      wx.createSelectorQuery()
        .select(`#${boothIndex}`)
        .boundingClientRect((boothRect) => {
          if (!boothRect) return;
          
          wx.createSelectorQuery()
            .select('.map-container')
            .scrollOffset((scrollRect) => {
              if (!scrollRect) return;
              
              wx.createSelectorQuery()
                .select('.map-container')
                .boundingClientRect((containerRect) => {
                  if (!containerRect) return;
                  
                  // 计算展位中心点相对容器的位置
                  const boothCenterX = boothRect.left - containerRect.left + scrollRect.scrollLeft + boothRect.width / 2;
                  const boothCenterY = boothRect.top - containerRect.top + scrollRect.scrollTop + boothRect.height / 2;
                  
                  // 计算容器中心点位置
                  const containerCenterX = containerRect.width / 2;
                  const containerCenterY = containerRect.height / 2;
                  
                  // 计算需要滚动到的目标位置，使展位居中
                  const scrollX = boothCenterX - containerCenterX;
                  const scrollY = boothCenterY - containerCenterY;
                  
                  // 使用scroll-view的scroll-left和scroll-top属性实现居中
                  this.setData({
                    scrollLeft: scrollX,
                    scrollTop: scrollY
                  });
                })
                .exec();
            })
            .exec();
        })
        .exec();
    }, 100); // 100ms防抖
  },

  // 将自定义区域居中显示
  centerCustomArea(areaIndex) {
    const area = this.data.customAreas[areaIndex];
    if (!area || !area.points || area.points.length === 0) return;
    
    // 添加防抖，避免频繁触发
    if (this.centerAreaTimer) {
      clearTimeout(this.centerAreaTimer);
    }

    this.centerAreaTimer = setTimeout(() => {
      wx.createSelectorQuery()
        .select(`#${area.id}`)
        .boundingClientRect((areaRect) => {
          if (!areaRect) return;
          
          wx.createSelectorQuery()
            .select('.map-container')
            .scrollOffset((scrollRect) => {
              if (!scrollRect) return;
              
              wx.createSelectorQuery()
                .select('.map-container')
                .boundingClientRect((containerRect) => {
                  if (!containerRect) return;
                  
                  // 计算区域中心点相对容器的位置
                  const areaCenterX = areaRect.left - containerRect.left + scrollRect.scrollLeft + areaRect.width / 2;
                  const areaCenterY = areaRect.top - containerRect.top + scrollRect.scrollTop + areaRect.height / 2;
                  
                  // 计算容器中心点位置
                  const containerCenterX = containerRect.width / 2;
                  const containerCenterY = containerRect.height / 2;
                  
                  // 计算需要滚动到的目标位置，使区域居中
                  const scrollX = areaCenterX - containerCenterX;
                  const scrollY = areaCenterY - containerCenterY;
                  
                  // 使用scroll-view的scroll-left和scroll-top属性实现居中
                  this.setData({
                    scrollLeft: scrollX,
                    scrollTop: scrollY
                  });
                })
                .exec();
            })
            .exec();
        })
        .exec();
    }, 100); // 100ms防抖
  },

  // 搜索输入事件
  onSearchInput(e) {
    this.setData({
      searchKeyword: e.detail.value
    });
  },

  // 执行搜索
  performSearch() {
    const keyword = this.data.searchKeyword.trim();
    if (!keyword) {
      wx.showToast({
        title: '请输入搜索关键词',
        icon: 'none'
      });
      return;
    }

    // 只在当前展馆中查找匹配的展商
    const currentMap = this.data.currentMap;
    const booths = this.data.booths;
    let found = false;
    let foundBoothIndex = -1;
    let id;

    // 在当前展馆中查找匹配的展商
    for (let j = 0; j < booths.length; j++) {
      const booth = booths[j];
      if (booth.company_info && booth.company_info.company_name && booth.company_info.company_name.toLowerCase().includes(keyword.toLowerCase())) {
        found = true;
        foundBoothIndex = j;
        id = 'booth-'+booth.id;
        break;
      }
    }

    if (found) {
      // 如果找到了展商
      // 直接定位到展商展位，无需切换展馆
      this.setData({
        selectedBoothIndex: foundBoothIndex,
        selectedAreaIndex: -1,
        searchKeyword: ''
      });
      
      // 定位到展商展位
      setTimeout(() => {
        console.log(id);
        this.centerBooth(id);
      }, 100);
    } else {
      // 未找到匹配的展商
      wx.showToast({
        title: '未找到匹配的展商',
        icon: 'none'
      });
    }
  }
})